<template name="orderBaseInfo">
	<view :style="$s.view_color" class="place-order-base-info">
	    <view class="inner">
	        <view class="car-info" @click="infoShow()">
	            <view class="thumb">
	                <view class="tag"><text>查看详情</text></view>
	                <image class="img" mode="aspectFill" :src="carInfo.thumb"></image>
	            </view>
	            <view class="info">
	                <view class="brand">
	                    <text class="text">{{carInfo.name}}</text>
						<text class="gb-type" v-if="carInfo.car_info.gearbox=='手动挡'">手</text>
						<text class="gb-type" v-if="carInfo.car_info.gearbox=='自动挡'">自</text>
	                </view>
	                <text class="desc">
						<text class="item" >{{carInfo.car_info.year}}年</text>
						<text class="item" >{{carInfo.car_info.door}}</text>
						<text class="item" >{{carInfo.car_info.seat}}</text>
						<text class="item" >{{carInfo.car_info.gearbox}}</text>
					</text>
	                <text class="desc tag">
						<block v-for="(tag,index) in carInfo.service_tag" :key="index">
							<text class="item" :style="{'border-color':tag.color,'color':tag.color}">{{tag.name}}</text>
						</block>
					</text>
	            </view>
	        </view>
			
			<car-day-price v-if="carInfo.day_price.length>0" :list="carInfo.day_price"></car-day-price>
			<car-comment :textdata="carInfo"></car-comment>
			<view @click="openLoaction">
				<view class="rent-range">
				    <view class="range">
				        <text class="title">取车时间</text>
				        <text class="time">{{startDate.timestamp | date('mm月dd日 hh:MM')}}</text>
				    </view>
				    <text class="total">{{rentalDate.text}}</text>
				    <view class="range">
				        <text class="title">还车时间</text>
				        <text class="time">{{endDate.timestamp | date('mm月dd日 hh:MM')}}</text>
				    </view>
				</view>
				
				<view class="row address rent">
				    <view class="dot"></view>
				    <text class="label">{{gainInfo.type===1 ? '上门送车':'门店取车'}}</text>
				    <text class="value">{{gainInfo.type===1 ? gainInfo.title : gainInfo.storeName }}</text>
				</view>
				<view class="row address revert">
				    <view class="dot"></view>
					<text class="label">{{backInfo.type===1 ? '上门取车':'门店还车'}}</text>
					<text class="value">{{backInfo.type===1 ? backInfo.title : backInfo.storeName }}</text>
				</view>
			</view>
	    </view>
		
		<car-content ref="carContent"></car-content>
		
		<location-select ref="locationRental" @submit="locationRentalConfirm" :carid="carInfo.id"></location-select>
		
		<calendar-single ref="singleCalendar" @dateConfirm="reletConfirm"></calendar-single>
		
	</view>
	
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		name: 'orderBaseInfo',
		props: {
			carInfo:{
				type: [Object, Array],
				default: {}
			},
			gainInfo:{
				type: [Object, Array],
				default: {}
			},
			backInfo:{
				type: [Object, Array],
				default: {}
			},
			startDate:{
				type: [Object, Array],
				default: {}
			},
			endDate:{
				type: [Object, Array],
				default: {}
			},
			rentalDate:{
				type: [Object, Array],
				default: {}
			},
			orderType:{
				type: [Number],
				default: 1
			},
		},
		data() {
			return {
				carShow:false,
				content:'',
			};
		},
		watch: {
			carInfo(val){
				this.content=this.$c.html_decode(val.content)
			}
		},
		computed:{
		},
		methods: {
			openLoaction(){
				if(this.orderType===1){				//常规下单
					this.$refs.locationRental.open()
				}else if(this.orderType===2){		//续租订单
					this.$refs.singleCalendar.dateOpen()
				}				
			},
			// 返回确认日期修改给父组件
			locationRentalConfirm(){
				this.$emit('dateConfirm')
			},
			// 续租确认还车日期
			reletConfirm(e){
				this.$store.commit('setEndDate',e)
				this.$emit('dateConfirm')
			},
			infoShow(){
				this.$refs.carContent.open(this.carInfo.id);
			},
		}
	};
</script>

<style lang="scss">
	.place-order-base-info {
	    margin: 0 32rpx 32rpx;
	}
	
	.place-order-base-info .tips {
	    margin-bottom: 32rpx;
	}
	
	.place-order-base-info .inner {
	    padding: 32rpx 32rpx 10rpx;
	    background: #fff;
	    border-radius: 20rpx;
	}
	
	.place-order-base-info .car-info {
	    display: -ms-flexbox;
	    display: flex;
	    padding-bottom: 32rpx;
	}
	
	.place-order-base-info .car-info .thumb {
	    position: relative;
	    display: block;
	    width: 180rpx;
	    height: 128rpx;
	    margin-right: 20rpx;
	    overflow: hidden;
	    border-radius: 10rpx;
	}
	
	.place-order-base-info .car-info .thumb .img {
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	    background: rgba(60,60,90,.05);
	}
	
	.place-order-base-info .car-info .thumb .tag {
	}
	
	.place-order-base-info .car-info .thumb .tag text{
		border-radius: 10rpx;
		position: absolute;
		z-index: 2;
		right: 0rpx;
		bottom: 0rpx;
		color: $bnt-font-color;
		background-color: var(--view-theme);
		opacity: 0.8;
		padding: 3rpx 5rpx;
		font-size: 18rpx;
	}
	
	.place-order-base-info .car-info .thumb .tag .tag-img {
	    position: absolute;
	    top: -4rpx;
	    left: -4rpx;
	    display: block;
	}
	
	.place-order-base-info .car-info .info {
	    flex: 1;
	    padding-top: 5rpx;
	}
	
	.place-order-base-info .car-info .info .brand {
	    margin-bottom: 10rpx;
	}
	
	.place-order-base-info .car-info .info .brand .text {
	    font-weight: 700;
	    font-size: 28rpx;
		width: 370rpx;
		max-width: -webkit-calc(100%);
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	
	.place-order-base-info .car-info .info .brand,.place-order-base-info .car-info .info .brand .gb-type,.place-order-base-info .rent-range,.place-order-base-info .row {
	    display: -ms-flexbox;
	    display: flex;
	    -ms-flex-align: center;
	    align-items: center;
	}
	
	.place-order-base-info .car-info .info .brand .gb-type {
	    -ms-flex-pack: center;
	    justify-content: center;
	    width: 32rpx;
	    height: 32rpx;
	    margin-left: 10rpx;
	    font-size: 20rpx;
	    border: 2rpx solid rgba(60,60,90,.3);
	    border-radius: 8rpx;
	}
	
	.place-order-base-info .car-info .info .desc {
	    display: block;
	    font-size: 22rpx;
	    opacity: .6;
	}
	
	.place-order-base-info .car-info .info .desc .item{
		margin-right: 15rpx;
	}
	
	.place-order-base-info .car-info .info .tag{
		line-height: 44rpx;
	}
	
	.place-order-base-info .car-info .info .tag .item{
		font-size: 16rpx;
		border:1rpx solid;
		border-radius: 5rpx;
		padding: 2rpx 8rpx;
	}
	
	.place-order-base-info .rent-range,.place-order-base-info .row {
	    border-top: 1px solid rgba(60,60,90,.05);
	}
	
	.place-order-base-info .rent-range {
	    padding: 25rpx 0;
	}
	
	.place-order-base-info .rent-range:active {
	    opacity: .7;
	}
	
	.place-order-base-info .rent-range .range {
	    display: -ms-flexbox;
	    display: flex;
	    flex-direction: column;
	    -ms-flex-align: start;
	    align-items: flex-start;
	    width: 210rpx;
	}
	
	.place-order-base-info .rent-range .range .title {
	    display: block;
	    padding-right: 30rpx;
	    color: rgba(60,60,90,.6);
	    font-size: 22rpx;
	}
	
	.place-order-base-info .rent-range .range .time {
	    display: block;
	    font-weight: 700;
	    font-size: 28rpx;
	}
	
	.place-order-base-info .rent-range .total {
	    display: block;
	    flex: 1;
	    font-size: 22rpx;
	    text-align: center;
	}
	
	.place-order-base-info .row {
	    min-height: 90rpx;
	}
	
	.place-order-base-info .row .label {
	    display: block;
	    font-size: 26rpx;
	}
	
	.place-order-base-info .row .desc {
	    margin-right: 20rpx;
	}
	
	.place-order-base-info .row .desc,.place-order-base-info .row .none {
	    display: block;
	    font-size: 22rpx;
	    opacity: .6;
	}
	
	.place-order-base-info .row .amount {
	    display: block;
	    font-size: 26rpx;
	}
	
	.place-order-base-info .row .amount.red {
	    color: $price-color
	}
	
	.place-order-base-info .row .flex {
	    display: block;
	    flex: 1;
	    width: 100%;
	}
	
	.place-order-base-info .row .icon-zhe {
	    display: -ms-flexbox;
	    display: flex;
	    -ms-flex-align: center;
	    align-items: center;
	    -ms-flex-pack: center;
	    justify-content: center;
	    width: 52rpx;
	    height: 52rpx;
	    margin-left: -13rpx;
	    color: #fff;
	    font-size: 36rpx;
	    line-height: 1;
	    background: #ffc93f;
	    border-radius: 12rpx;
	    transform: scale(.5);
	}
	
	.place-order-base-info .row.arrow {
	    padding-right: 30rpx;
	    background: url(../static/images/icon-arrow-right-black.png) right center no-repeat;
	    background-size: 30rpx auto;
	}
	
	
	.place-order-base-info .row {
	    display: -ms-flexbox;
	    display: flex;
	    -ms-flex-align: center;
	    align-items: center;
	    min-height: 90rpx;
	    border-top: 1px solid rgba(60,60,90,.05);
	}
	
	.place-order-base-info .row .label {
	    display: block;
	    font-size: 26rpx;
	}	
	
	.place-order-base-info .row.address {
	    border-top: none;
	}
	
	.place-order-base-info .row.address:active {
	    opacity: .7;
	}
	
	.place-order-base-info .row.address.rent .label {
	    font-weight: 700;
	}
	
	.place-order-base-info .row.address.rent .dot {
	    background: var(--view-theme);
	}
	
	.place-order-base-info .row.address.revert {
	    border-top: 1px solid rgba(60,60,90,.05);
	}
	
	.place-order-base-info .row.address.revert .label {
	    font-weight: 700;
	}
	
	.place-order-base-info .row.address .dot {
	    width: 14rpx;
	    height: 14rpx;
	    margin-right: 12rpx;
	    background: var(--view-assist);
	    border-radius: 50%;
	}
	
	.place-order-base-info .row.address .label {
	    width: 6em;
	}
	
	.place-order-base-info .row.address .value {
	    flex: 1;
	    overflow: hidden;
	    font-size: 26rpx;
	    white-space: nowrap;
	    text-overflow: ellipsis;
	    opacity: .8;
	}
	
	.place-order-base-info .row.arrow {
	    padding-right: 30rpx;
	    background: url(../static/images/icon-arrow-right-black.png) right center no-repeat;
	    background-size: 30rpx auto;
	}
</style>
